<template>
	<div style="text-align: left;">
		<h4 style="text-align: center;">部门详细信息</h4>
		<div>
			<label>部门名称:</label>
			<div class="d-inline">
				<span>{{depart.code}}</span>
			</div>
		</div>
		<div>
			<label>部门名称:</label>
			<div class="d-inline">
				<span>{{depart.name}}</span>
			</div>
		</div>
		<div>
			<label>使用状态:</label>
			<div class="d-inline">
				<span v-if="1==depart.useState" style="color: blue;">使用中</span>
				<span v-else-if="2==depart.useState" style="color: red;">已停用</span>
				<span v-else style="color: gold;">未知</span>
			</div>
		</div>
		<div>
			<label>创建时间:</label>
			<div class="d-inline">
				<span>{{depart.createTime}}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineProps
	} from 'vue';
	import api from '@api/index.js';
	import {
		ElMessage,
		ElMessageBox,
	} from 'element-plus'
	const props = defineProps({
		depId: {
			type: Number,
			required: true
		}
	});
	//部门数据
	let depart = ref({});
	onMounted(() => {
		api.department.getById(props.depId).then((responseData) => {
			let code = responseData.code;
			if (200 !== code) {
				ElMessage.warning(`加载部门数据失败【${response.message}】`);
				return;
			}
			//判断是否查询到数据
			if (responseData.hasOwnProperty('data')) {
				//加载到部门数据
				depart.value = responseData.data;
			} else {
				//未查询到数据,说明该部门记录不存在或已被删除
				ElMessage.warning('未加载到部门数据,该部门记录不存在或已被删除!');
			}
		}).catch((error) => {
			ElMessage.warning(error);
		});
	});
</script>

<style scoped>
	
	label{
		width: 100px;
		display: inline-block;
    text-align: left;
	}
	
</style>